<template>
    <div class="container mx-auto">
        <div>
            <el-row :gutter="20">
                <el-col :span="5">
                    <div id="neirong">
                        <div class="flex-1 mb-2">
                            <div style=" height: 40px;line-height: 40px;padding-left: 20px;background-color: #1e50ae;">
                                <span class="text-base" style="margin-right: 6vw;color:#ffffff">魅力湟源</span>
                                <nuxt-link>
                                    <el-button :icon="ElIconArrowRight" circle size="small" />
                                </nuxt-link>
                            </div>
                            <ul>
                                <li v-for="(item, index) in news.slice(0, 6)" :key="index" style="padding-left: 0.5vw;">
                                    <nuxt-link class="flex  content custom-link">
                                        <span class="content flex-1" style="flex:1.2">{{ item.title }}</span>
                                        <span class="flex-1 pl-4">{{ item.time }}</span>
                                    </nuxt-link>
                                </li>
                            </ul>
                        </div>

                    </div>
                </el-col>
                <el-col :span="14">
                    <div id="neirong">
                        <div class="flex-1 mb-2">
                            <h1 class="navTitle">湟源概况</h1>
                            <div class="line"></div>
                            <el-row>
                                <el-col :span="9" class="p-1">
                                    <img src="/assets/images/huangyuan8.png" alt="">
                                </el-col>
                                <el-col :span="15">
                                    <div class="p-1 pl-4">
                                        <h1 class="text-lg py-2 pl-8 font-semibold">中国湟源</h1>
                                        <div class="indent-8 text-sm " style="color: #1e50ae;">
                                            湟源县位于青海湖东岸，日月山东麓，湟水河上游，是青海东部农业区与西部牧业区、黄土高原与青藏高原、藏文化与汉文化的结合部，青藏铁路、109和315国道穿境而过，素有“海藏通衢”和“海藏咽喉”之称。全县总面积1545平方公里，海拔在2470-4898米之间，辖7乡2镇，146个行政村，8个社区，常住人口136117人（农业人口94407人），有藏、回、蒙、土等13个少数民族。
                                            <nuxt-link to="http://www.baidu.com">
                                                <button>...更多</button>
                                            </nuxt-link>
                                            
                                        </div>

                                    </div>
                                </el-col>
                            </el-row>
                        </div>

                    </div>
                    <div id="neirong">
                        <div class="flex-1 mb-2">
                            <h1 class="navTitle">湟源概况</h1>
                            <div class="line"></div>
                            <nuxt-link class="custom-link">
                            <div class=" grid grid-cols-3 gap-8   ">
                               
                                    <div v-for="(person, index) in people" :key="index" class="photo-card">
                                    <img :src="person.photo" :alt="person.name" class="photo" />
                                    <div class="caption">
                                        <h1 class="text-center text-base">{{ person.title }}</h1>
                                    </div>
                                </div>
                                
                               
                            </div>
                        </nuxt-link>
                        </div>

                    </div>
                </el-col>
                <el-col :span="5">
                    <span class="navTitle mb-2">湟源宣传片</span>
                    <div class="line"></div>
                    <ul class="mx-auto">
                        <li v-for="(item, index) in pic" :key="index" class="mt-2">
                            <img :src="item.src" style="height: 160px;width:100%;" class="my-2">
                            <div style="text-align: center;width: 150px;">{{ item.title }}</div>
                        </li>
                    </ul>
                </el-col>
            </el-row>
        </div>
        <div>
            <h1 class="navTitle">湟源风光</h1>
            <div class="line"></div>
            <CustomSwiper :slides="slides"></CustomSwiper>
        </div>
    </div>
</template>

<script setup>
const people = [
    {
        photo: '/assets/images/huangyuan9.png',
        
        title: '文化旅游'
    },
    {
        photo: '/assets/images/huangyuan10.png',
        
        title: '行政区划'
    },
    {
        photo: '/assets/images/huangyuan11.png',
        
        title: '县域经济'
    },
    {
        photo: '/assets/images/huangyuan12.png',
        
        title: '发展优势'
    },
    {
        photo: '/assets/images/huangyuan13.png',
        title: '绿色环保'
    },
    {
        photo: '/assets/images/huangyuan9.png',
        title: '循环农业'
    },
]
const news = ref(
    [
        {
            title: '习近平总书记关切事｜擦亮高原蓝宝石——青海湖保护纪事',
            time: '2024-06-08'
        },
        {
            title: '湟源县开展高考保障监督检查工作',
            time: '2024-06-05'
        },
        {
            title: '湟源县各学校形式多样庆祝“六一”国际儿童',
            time: '2024-06-03'
        },
        {
            title: '湟源县召开十七届县委第84次常委会会议',
            time: '2024-06-03'
        },
        {
            title: '湟源县召开十七届县委第84次常委会会议',
            time: '2024-06-03'
        },
        {
            title: '湟源县召开十七届县委第84次常委会会议',
            time: '2024-06-03'
        },

    ])
const recentNews = ref(
    [
        {
            title: '关爱赋能助成长 携手同行向未来',
            time: '2016-10-09'
        },
        {
            title: '发挥政协优势 助推未诉先办',
            time: '2016-10-09'
        },
        {
            title: '西宁首家未成年人社会支持体系实践基地在湟源建立',
            time: '2016-10-09'
        },
        {
            title: '西宁首家未成年人社会支持体系实践基地在湟源建立',
            time: '2016-10-09'
        },
        {
            title: '西宁首家未成年人社会支持体系实践基地在湟源建立',
            time: '2016-10-09'
        },
    ])
const townshipNews = ref(
    [
        {
            title: '【和平乡】打造“党建微网格15分钟服务圈” 实现服务群众“零距离”',
            time: '2024-05-30'
        },
        {
            title: '【东峡乡】法律宣传精彩纷呈点亮群众美好生活',
            time: '2024-05-30'
        },
        {
            title: '【大华镇】驻村干部办实事 爱心助残解民忧',
            time: '2024-05-29'
        },
        {
            title: '【寺寨乡】惠民政策进村庄 服务群众“零距离”',
            time: '2024-05-29'
        },
        {
            title: '【寺寨乡】惠民政策进村庄 服务群众“零距离”',
            time: '2024-05-29'
        },
    ])
const departmentWork = ref(
    [
        {
            title: '【县检察院】“三抓三促”提升机关党建实效',
            time: '2024-05-30'
        },
        {
            title: '【县公安局】刑侦大队联合城关中心派出所开展防范电信网络诈骗进校园宣传活动',
            time: '2024-05-28'
        },
        {
            title: '【县民政局】反邪不停歇 聚力筑平安',
            time: '2024-05-27'
        },
        {
            title: '【县公安局】打好“三战”筑牢 安全生产防线',
            time: '2024-05-23'
        },
        {
            title: '【县检察院】“四抓四促”提升机关党建实效',
            time: '2024-05-21'
        },


    ]
)
const slides = ref([
    { image: '/assets/images/huangyuan1.png', text: '走进大山深处感受自然风情 宗家沟' },
    { image: '/assets/images/huangyuan2.png', text: '梦想畅怀日月山' },
    { image: '/assets/images/huangyuan3.png', text: '茶马古道秋景' },
    { image: '/assets/images/huangyuan4.png', text: '走进“青藏高原的小北京”' },
    { image: '/assets/images/huangyuan5.png', text: '日月山景区' },
    { image: '/assets/images/huangyuan6.png', text: '湟源大黑沟：天赐青藏高原的神奇九寨' },
    { image: '/assets/images/huangshan.png', text: '纪念“黄山谈话”30周年系列活动' },
    { image: '/assets/images/huangshan2.png', text: '纪念“黄山谈话”30周年系列活动' },
]);
const swiper = ref([
    {
        src: '/assets/images/swiper1.png',
        title: '湟源县开展高考保障监督检查工作'
    },
    {
        src: '/assets/images/swiper2.png',
        title: '湟源县各学校形式多样庆祝“六一”国际儿童'
    },
    {
        src: '/assets/images/swiper3.png',
        title: '关爱赋能助成长 携手同行向未来'
    },
    {
        src: '/assets/images/swiper4.png',
        title: '发挥政协优势 助推未诉先办'
    },
])
const pic = ref([
    {
        src: '/assets/images/huangyuan7.png',
        title: '微电影《丹噶尔传奇》'
    },
    {
        src: '/assets/images/huangyuan7.png',
        title: '微电影《丹噶尔传奇》'
    },
    // {
    //     src: '/assets/images/huangshan.png',
    //     title: '淮北参观学习'
    // },
])
</script>

<style scoped lang="scss">
.image-slider2 {
    width: 100%;
    max-width: 220px;
    height: 190px;
    // margin: 0 auto;
    margin-left: 16px;
    margin-bottom: 10px;
    margin-top: 10px;
    /* margin-left: 5vw; */
    position: relative;
}

.slide2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slide-image2 {
    width: 100%;
    height: auto;
    display: block;
}

.slide-text2 {
    margin-top: 10px;
    font-size: 11px;
    text-align: center;
}

.container {
    display: flex;
    flex-direction: column;
    margin-top: 1vh;
    width: 65vw;

    .el-col {
        display: flex;
        flex-direction: column;

        #neirong {
            p {
                height: 4vh;
                line-height: 4vh;
                padding-left: 2vw;
                background-color: #1e50ae;
            }

            ul {
                li {
                    height: 4vh;
                    line-height: 4vh;
                    padding-left: 2vw;
                    background-color: #f6f6f6;
                    border-bottom: 1px dashed #d9d9d9;
                    display: flex;
                }
            }
        }
    }

    .swipers {
        border-bottom: 1px solid #cccccc;
        height: 4vh;
        margin-bottom: 2vh;
        width: 65vw;
    }
}
</style>